<template>
  <div id="example">
    <ul class="music-title">
      <template v-for="item in computedList">
        <li v-if="item.is_show"
            :key="item.id"
            :class="{'music-list-li': item.active}"
            @click="handleClickAnimation(item, $event)">
          <el-row class="music-list">
            <el-col :span="5">
              <el-avatar :size="60">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
              </el-avatar>
            </el-col>
            <el-col :span="12"
                    v-show="!item.active">
              <div class="music-song">
                <span>{{item.name}}</span>
                <span>{{item.singer}}</span>
              </div>
            </el-col>
            <el-col :span="7"
                    v-show="!item.active">
              <div style="font-size: 20px;text-align: center;line-height: 60px;">3:22</div>
            </el-col>
          </el-row>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui.js'

export default {
  name: 'singer-list',
  components: {},
  data () {
    return {
      publicPath: process.env.BASE_URL,
      dataList: [
        {
          'id': 1,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 2,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 3,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 4,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 5,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 6,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 7,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 8,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        },
        {
          'id': 9,
          'name': '能不能给我一首歌的时间',
          'singer': '周杰伦',
          'is_show': true,
          'active': false
        }
      ]
    }
  },
  created () {
  },
  mounted () {
    this.mouseHover()
    this.loadAnimation()
  },
  computed: {
    computedList: function () {
      return this.dataList
    }
  },
  watch: {},

  methods: {
    // 鼠标放上去的动画
    mouseHover () {
      let length = this.dataList.length
      for (let i = 0; i < length; i++) {
        $('.music-title').eq(i).css('animationDelay', parseFloat((i + 1) / length + 0.05) + 's')
      }
    },
    // 载入动画
    loadAnimation () {
      Velocity($('.music-title li'), 'slideInLeft', { stagger: 300 })
    },
    // 点击动画
    handleClickAnimation (item, event) {
      item.active = !item.active
      Velocity(event.target, 'slideOutDown', { stagger: 100 })
      this.dataList = this.dataList.filter((val) => {
        if (item.id === val.id) {
          val.show = false
        }
        return val
      })
      console.log(event)
    }
  }
}
</script>

<style lang="scss">
.music-list {
  font-family: "Fredoka One", cursive;
  font-weight: 700;
  color: purple;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 1s, opacity 1s, background 1s, width 1s,
    height 1s, font-size 1s;
  position: absolute;
  transition-property: width, height, transform, background, font-size, opacity;
  transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
}

.music-list:hover {
  transform: rotate(360deg);
  opacity: 1;
  background: purple;
  font-size: 16px;
  color: #ffffff;
  border-radius: 5px;
  padding: 15px;
  margin: 5px;
}
.music-list-li {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  animation: bounce-singer 2s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
}
@keyframes bounce-singer {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 0 0.05em;
  }
  10% {
    transform: translate3d(1em, 1em, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 0 0.05em;
  }
  20% {
    transform: translate3d(2em, 0em, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 1em 0.35em;
  }
  100% {
    transform: translate3d(100em, 100em, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 1em 0.35em;
  }
}
</style>
